<template>
    <div>
        <transition-group
            class="nums"
            name="list"
            tag="div"
            :style="{
                height: `${size}px`,
                width: `${size * 4}px`,
                position: 'relative',
            }"
        >
            <p
                v-for="(item, index) in text"
                :key="index"
                class="amount"
                style="display: inline-block; position: absolute"
                :style="{
                    fontSize: `${size}px`,
                    color: `${color}`,
                    left: `${text.length > 0 ? index * size : 0}px`,
                    transition:
                        text.length > 0
                            ? `all ${index * 0.2}s ease 0s`
                            : '`all ${index*0.2}s ease 0s`',
                }"
            >
                {{ item }}
            </p>
        </transition-group>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
    name: 'Drags',
    props: {
        size: {
            type: String,
            default: () => '20',
        },
        color: {
            type: String,
            default: () => '#f40',
        },
    },
    setup() {
    //   数字轮播
        const text = ref()
        let num = 1000
        onMounted(() => {
            // 初始化
            text.value = '1000'.split('')
            setTimeout(() => {
                text.value = []
            }, 3000)
            //   后面定时触发
            setInterval(() => {
                setTimeout(() => {
                    text.value = []
                }, 2800)
                num++
                text.value = `${num}`.split('')
            }, 3200)
        })
        return {
            text,
        }
    },
})
</script>

<style lang="less" scoped>
.nums {
  display: inline-block;
}
.amount {
  display: flex;
  justify-content: center;
  font-weight: bold;
}
.list-enter-active,
.list-leave-active {
  transition: transform 1s ease, opacity 1s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateY(50%);
}

.list-leave-to {
  opacity: 0;
  transform: translateY(-50%);
}
</style>
